<template>
  <div class="params-info" v-if="paramsInfo">
    <div class="rule" v-if="paramsInfo.rule">
      <div :key="index_table" v-for="(tbs,index_table) in paramsInfo.rule.tables">
        <table>
          <tr :key="index_items" v-for="(items,index_items) in  tbs">
            <td :key="index" v-for="item,index in items">{{item}}</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="info" v-if="paramsInfo.info">
      <table>
        <tr :key="index" v-for="(item,index) in  paramsInfo.info.set">
          <td>{{item.key}}</td>
          <td>{{item.value}}</td>
        </tr>
      </table>
    </div>


  </div>
</template>

<script>
  export default {
    name: "DetailParamsInfo",
    props: {
      paramsInfo: {
        type: Object,
        default() {
          return {}
        }
      }
    }
  }
</script>

<style scoped>

  .params-info {
    margin-top: 20px;
    padding: 0 20px 20px 20px ;

    background-color: #fff;
    border-bottom: 5px solid #f2f5f8;
  }

  .rule table,
  .info table {

    border-collapse: collapse;
  }

  .rule table tr,
  .info table tr {
    border-bottom: 1px solid #ededed;
    width: 100%;
  }

  .rule table tr td {
    width: 59px;
    height: 35px;
    line-height: 35px;
    text-align: left;
    font-size: 14px;
  }

  .info table tr td {
    padding: 10px 0;
  }

  .info table tr td:first-child {
    width: 59px;
  }

  .info table tr td:last-child {

    color: #fbb1bb;
  }
</style>
